<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .row {
                display: flex;
                justify-content: flex-start;
            }
            .row .item {
                width: 50px;
                height: 50px;
                text-align: center;
                color: #fff;
                border: 1px solid #000;
            }
            .item-1 {
                background-color: #aa0000;
            }
            .item-2 {
                background-color: #aa5500;
            }
            .item-3 {
                background-color: #00aa00;
            }
            .item-4 {
                background-color: #aaaa00;
            }
            .item-5 {
                background-color: #00ff00;
            }
            .item-6 {
                background-color: #aaff00;
            }
            .item-7 {
                background-color: #00007f;
            }
            .item-8 {
                background-color: #aa007f;
            }
            .item-9 {
                background-color: #00557f;
            }
            .item-10 {
                background-color: #aa557f;
            }
            .item-11 {
                background-color: #00aa7f;
            }
            .item-12 {
                background-color: #aaaa7f;
            }
            .item-13 {
                background-color: #00ff7f;
            }
            
            .item-14 {
                background-color: #aaff7f;
            }
            .item-15 {
                background-color: #0000ff;
            }
            .item-16 {
                background-color: #aa00ff;
            }
            .item-17 {
                background-color: #0055ff;
            }
            .item-18 {
                background-color: #aa55ff;
            }
            .item-19 {
                background-color: #55ffff;
            }
            .item-20 {
                background-color: #ffaaff;
            }
            .item-21 {
                background-color: #ff55ff;
            }
            .item-22 {
                background-color: #ff00ff;
            }
            .item-16 {
                background-color: #55557f;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script>
        let board = null
        let n = 8
        let t = 1
        let htmlStr = ''
        let num = 1
        let time = 200
        function chessBoard(tr, tc, dr, dc, size) {
            showChess()
                if (size == 1) return;
                let t1 = ++t; // 牌号+1
                let s = size / 2; // 划分棋盘为4块 
                // 分别针对特殊点的位置对棋盘进行递归 
                // 特殊点在左上角， tr+s表示左上角棋盘的范围
                // 1. 左上角棋盘处理 
                setTimeout(() => {
                if (dr < tr + s && dc < tc + s) {
                	chessBoard(tr, tc, dr, dc, s); // 直接递归 
                } else {
                	board[tr+s-1][tc+s-1] = t1; // 特殊点 
                	chessBoard(tr, tc, tr+s-1, tc+s-1, s); // 左上角的棋盘特殊标记放在右下角 
                } 
                }, time * num++)
                setTimeout(() => {
                // 2. 右上角棋盘处理
                if (dr < tr + s && dc >= tc + s) {
                	chessBoard(tr, tc+s, dr, dc, s); // 直接递归 
                } else {
                	board[tr+s-1][tc+s] = t1; // 特殊点 
                	chessBoard(tr, tc+s, tr+s-1, tc+s, s); // 右上角的棋盘特殊标记放在左下角 
                } 
                }, time * num++)
                setTimeout(() => {
                // 3. 左下角棋盘处理 
                if (dr >= tr + s && dc < tc + s) {
                	chessBoard(tr+s, tc, dr, dc, s); // 直接递归 
                } else {
                	board[tr+s][tc+s-1] = t1; // 特殊点 
                	chessBoard(tr+s, tc, tr+s, tc+s-1, s); // 左下角的棋盘特殊标记放在右上角 
                } 
                }, time * num++)
                setTimeout(() => {
                // 4. 左上角棋盘处理 
                if (dr >= tr + s && dc >= tc + s) {
                	chessBoard(tr+s, tc+s, dr, dc, s); // 直接递归 
                } else {
                	board[tr+s][tc+s] = t1; // 特殊点 
                	chessBoard(tr+s, tc+s, tr+s, tc+s, s); // 左上角的棋盘特殊标记放在右下角 
                } 
            }, time * num++)
        }
        function showChess() {
            htmlStr = ''
            for (let i = 0; i < n; i++) {
                htmlStr += '<div class="row">'
                for (let j = 0; j < n; j++) {
                    htmlStr += `<div class="item item-${board[i][j]}"">${board[i][j]}</div>`;
                }
                htmlStr += '</div>'
            }
            document.getElementById('box').innerHTML = htmlStr
        }
        board = new Array(n)
        for (let i = 0; i < n; i++) {
            board[i] = new Array(n)
        }
        console.log('初始化', board)
        board[1][1] = t; 
        chessBoard(0, 0, 1, 1, n);
        showChess()
    </script>
</html>
